<template>
    <div class="flex flex-col flex-1 p-2">
        <div class="flex justify-between">
            <div class="flex-1"></div>
            <div>
                <el-button type="primary" @click="openDialog">新增</el-button>
            </div>
        </div>
        <CustomTable class="mt-2" :data="tableData" :total="tableTotal" v-model:page-size="pageSize" @pageSize="getList"
            v-model:currentPage="pageNum" @currentPage="getList">
            <el-table-column type="index" width="60" label="序号" />
            <el-table-column prop="categoryId" label="商品分类">
                <template #default="{ row }">
                    {{ getCategoryStr(row.categoryId) }}
                </template>
            </el-table-column>
            <el-table-column prop="goodsName" label="商品名称" />
            <el-table-column prop="goodsImg" label="图片">
                <template #default="{ row }">
                    <el-image style="width: 100px; height: 100px" :src="row.goodsImg" fit="cover" />

                </template>
            </el-table-column>
            <el-table-column prop="goodsPrice" label="价格" />
            <el-table-column prop="goodsSpec" label="规格" />
            <el-table-column label="操作">
                <template #default="{ row }">
                    <el-button text type="primary" @click="removeGoods(row)">移除</el-button>
                </template>
            </el-table-column>
        </CustomTable>
    </div>
    <CustomDialog v-model:show="addDialog" title="新增商品" width="600px" @cancel="cancelDialog" @confirm="submitForm">
        <el-form ref="formRef" :model="goodsForm" label-width="auto">
            <el-form-item label="商品分类" prop="categoryId">
                <el-select v-model="goodsForm.categoryId">
                    <el-option v-for="item in categoryList" :value="item.id" :label="item.name"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="商品名称" prop="goodsName">
                <el-input v-model="goodsForm.goodsName"></el-input>
            </el-form-item>
            <el-form-item label="商品图片" prop="goodsImg">
                <SingleUpload v-model="goodsForm.goodsImg"></SingleUpload>
            </el-form-item>
            <el-form-item label="商品价格" prop="goodsPrice"><el-input
                    v-model="goodsForm.goodsPrice"></el-input></el-form-item>
            <el-form-item label="商品规格" prop="goodsSpec"><el-input
                    v-model="goodsForm.goodsSpec"></el-input></el-form-item>
        </el-form>
    </CustomDialog>

</template>

<script setup lang="ts">
import CustomTable from '@/components/CustomTable.vue'
import { onMounted, reactive, ref } from 'vue'
import { getGoodsList, addGoods, getCategoryList, getRules, delGoods } from '@/apis/goods'
import {
    addGroupRule,
    getGroupRuleList
} from '@/apis/group'
import CustomDialog from '@/components/CustomDialog.vue'
import SingleUpload from '@/components/SingleUpload.vue'
import { getStoreId } from '@/utils/store'
import { ElMessage } from 'element-plus'
const tableData = ref([])
const tableTotal = ref(0)
const pageSize = ref(10)
const pageNum = ref(1)

const getList = async () => {
    const storeId = getStoreId()
    if (storeId) {
        const res = await getGoodsList({
            pageNum: pageNum.value,
            pageSize: pageSize.value,
            storeId: getStoreId(),
            goodsName: ''
        })
        console.log(res)
        tableData.value = res.list
        tableTotal.value = res.total
    } else {
        ElMessage.error("请先创建店铺")
    }

}
const removeGoods = async (row) => {
    await delGoods(row.id)
    getList()
}
const addDialog = ref()
const openDialog = () => {
    addDialog.value = true
}
const cancelDialog = () => {
    addDialog.value = false
}
const submitForm = async () => {
    await addGoods(goodsForm)
    addDialog.value = false
    getList()
}

const goodsForm = reactive({
    goodsName: '',
    goodsImg: '',
    goodsPrice: '',
    goodsSpec: '',
    storeId: getStoreId(),
    categoryId: null,
})
const categoryList = ref([])
const getCategorys = async () => {
    const res = await getCategoryList({
        pageSize: 1000,
        pageNum: 1,
        name: ''
    })
    categoryList.value = res.list
}
const getCategoryStr = (id: number) => {
    const obj = categoryList.value.find(item => item.id === id)
    if (obj) {
        return obj.name
    } else {
        return '-'
    }
}

onMounted(() => {
    getList()
    getCategorys()
})
</script>

<style scoped></style>
